<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>出货单</title>
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="../../static/css/lib/bootstrap3.4.1.min.css" th:href="@{/css/lib/bootstrap3.4.1.min.css}">
    <!-- Bootstrap-table CSS-->
    <link rel="stylesheet" href="../../static/css/lib/bootstrap-table.min.css" th:href="@{/css/lib/bootstrap-table.min.css}">
    <!-- jquery-ui CSS-->
    <link rel="stylesheet" href="../../static/css/lib/jquery-ui.min.css" th:href="@{/css/lib/jquery-ui.min.css}">
    <!-- select2 CSS-->
    <link rel="stylesheet" href="../../static/css/lib/select2.min.css" th:href="@{/css/lib/select2.min.css}">
    <link rel="stylesheet" href="../../static/css/lib/select2-bootstrap.min.css" th:href="@{/css/lib/select2-bootstrap.min.css}">
    <link href="../../static/css/file.css" rel="stylesheet" th:href="@{/css/file.css}">
    <link href="../../static/css/table.css" rel="stylesheet" th:href="@{/css/table.css}">
    <!-- fileinput CSS-->
    <link rel="stylesheet" href="../../static/css/lib/fileinput.min.css" th:href="@{/css/lib/fileinput.min.css}">
    <link href="../../static/css/file.css" rel="stylesheet" th:href="@{/css/file.css}">
    <link href="../../static/css/table.css" rel="stylesheet" th:href="@{/css/table.css}">
</head>

<body onload="init();">

    <div class="panel-body" style="padding-bottom:0;">
        <div class="panel panel-default">
            <!--查询条件-->
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <div class="form-group" style="margin-top:15px">
                    <div class="row row-gap">
                        <label class="control-label col-sm-2 label-font" for="txt_search_order_number">订单号</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="txt_search_order_number">
                        </div>
    
                        <label class="control-label col-sm-2 label-font" for="txt_search_product_number">客户料号</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="txt_search_product_number">
                        </div>
                    </div>
    
                    <div class="row row-gap">
                        <label class="control-label col-sm-2 label-font" for="txt_search_item_name">品名</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="txt_search_item_name">
                        </div>
    
                        <label class="control-label col-sm-2 label-font" for="txt_search_spec">规格</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="txt_search_spec">
                        </div>
                    </div>
    
                    <div class="row row-gap">
                        <label class="control-label col-sm-2 label-font" for="txt_search_code">客户代码</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="txt_search_code">
                        </div>
                    </div>
    
                    <div class="row row-gap">
                        <div class="col-sm-offset-4" style="text-align:left;">
                            <button type="button" style="margin-left:50px" id="btn_filter" class="btn btn-primary" onclick="filter();">过滤</button>
                            <button type="button" style="margin-left:50px" id="btn_reset_filter" class="btn btn-primary" onclick="init();">重置过滤</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <h2 style="font-size: 18px; color: red;">只生成未出库的出货单，并且是一个客户生成一个出货单，可以先按照客户代码查询，然后生成出货单</h2>
        <!-- 工具栏-->
        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#addModal">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>生成出库单
            </button>
            <button id="btn_import" type="button" class="btn btn-default" data-toggle="modal" data-target="#excelModal">
                <span class="glyphicon glyphicon-import" aria-hidden="true"></span>批量导入
            </button>
            <button id="btn_export" type="button" class="btn btn-default" onclick="exportExcel();">
                <span class="glyphicon glyphicon-export" aria-hidden="true"></span>批量导出
            </button>
        </div>
        <table id="table"></table>
    </div>
    
    <!-- 模态框（Modal）查看 -->
    <div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="viewModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="viewModalLabel">
                        查看出货单信息
                    </h4>
                </div>
                <div class="modal-body">
                    <table class="table">
                        <caption>成品出货单信息</caption>
                        <tbody>
                        <tr>
                            <td>客户订单号</td>
                            <td id="view_order_number">xxx</td>
                        </tr>
                        <tr>
                            <td>客户代码</td>
                            <td id="view_code">xxx</td>
                        </tr>
                        <tr>
                            <td>品名</td>
                            <td id="view_item_name">xxx</td>
                        </tr>
                        <tr>
                            <td>规格</td>
                            <td id="view_spec">xxx</td>
                        </tr>
                        <tr>
                            <td>客户料号</td>
                            <td id="view_product_number">xxx</td>
                        </tr>
                        <tr>
                            <td>出库数量</td>
                            <td id="view_export_amount">xxx</td>
                        </tr>
                        <tr>
                            <td>备注</td>
                            <td id="view_remark">xxx</td>
                        </tr>
                        <tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    
    <!-- 模态框（Modal） 生成出库单 -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="min-width: 800px">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title text-center" id="addModalLabel">
                        出货单信息
                    </h2>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" onsubmit="return false;" >
                        <div class="form-group has-error">
                            <label class="col-sm-2 control-label label-font">发票抬头</label>
                            <div class="col-sm-10">
                                <select class="js-data-example-ajax form-control" id="title_name_select" title="发票抬头" onchange="setInputSuccess($('#title_name_select'));">
                                </select>
                            </div>
                        </div>
                        <div class="form-group has-error">
                            <label class="col-sm-2 control-label label-font">出货单代码</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" id="input_bill_of_sale_number" title="出货单代码"  onchange="addBillOfSaleNumInputChange();" >
                            </div>
                        </div>
    
                        <div class="form-group has-error">
                            <label class="col-sm-2 control-label label-font">发货日期</label>
                            <div class="col-sm-10">
                                <input type="date" class="form-control" id="input_bill_of_sale_date" title="发货日期" onchange="checkInputChange('input_bill_of_sale_date');">
                            </div>
                        </div>
    
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" onclick="add();">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    
    <!-- 模态框（Modal） 备注 -->
    <div class="modal fade" id="auditModal" tabindex="-1" role="dialog" aria-labelledby="auditModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="auditModalLabel">
                        添加备注信息
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group has-success">
                            <label class="col-sm-2 control-label label-font">备注</label>
                            <div class="col-sm-10">
                                <textarea  class="form-control" rows="6" id="audit_remark" title="备注"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" onclick="audit();">编辑</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    
    <!-- 模态框（Modal） 图片上传 -->
    <div class="modal fade" id="excelModal" tabindex="-1" role="dialog" aria-labelledby="excelModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="excelModalLabel">
                        excel上传
                    </h4>
                </div>
                <div class="modal-body">
                    <form enctype="multipart/form-data">
                        <div class="form-group">
                            <input id="upload" type="file" class="file" name="file">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

<!-- JavaScript files-->
<!-- jquery.js -->
<script src="../../static/js/lib/jquery.min.js" th:src="@{/js/lib/jquery.min.js}"></script>
<!-- Bootstrap.js -->
<script src="../../static/js/lib/bootstrap3.4.1.min.js" th:src="@{/js/lib/bootstrap3.4.1.min.js}"></script>
<!-- Bootstrap-table.js -->
<script src="../../static/js/lib/bootstrap-table.min.js" th:src="@{/js/lib/bootstrap-table.min.js}"></script>
<script src="../../static/js/lib/bootstrap-table-zh-CN.min.js" th:src="@{/js/lib/bootstrap-table-zh-CN.min.js}"></script>
<!-- sweetalert2.js -->
<script src="../../static/js/lib/sweetalert.min.js" th:src="@{/js/lib/sweetalert.min.js}"></script>
<script src="../../static/js/lib/es6-promise.auto.min.js" th:src="@{/js/lib/es6-promise.auto.min.js}"></script>
<!-- jquery-ui.js -->
<script src="../../static/js/lib/jquery-ui.min.js" th:src="@{/js/lib/jquery-ui.min.js}"></script>
<!-- select2.js -->
<script src="../../static/js/lib/select2.min.js" th:src="@{/js/lib/select2.min.js}"></script>
<script src="../../static/js/lib/Select2-zh-CN.js" th:src="@{/js/lib/Select2-zh-CN.js}"></script>
<script src="../../static/js/common.js" th:src="@{/js/common.js}"></script>
<script src="../../static/js/dragModel.js" th:src="@{/js/dragModel.js}"></script>
<!-- fileinput.js -->
<script src="../../static/js/lib/fileinput.min.js" th:src="@{/js/lib/fileinput.min.js}"></script>
<script src="../../static/js/lib/fileinput_locale_zh.js" th:src="@{/js/lib/fileinput_locale_zh.js}"></script>
<script src="../../static/js/common.js" th:src="@{/js/common.js}"></script>
<script src="../../static/js/dragModel.js" th:src="@{/js/dragModel.js}"></script>

<script>

    /** 初始化 */
    let $table = $('#table');
    let $titleNameSelect = $("#title_name_select");
    let $billOfSaleNumber = $("#input_bill_of_sale_number");

    // 服务器分页获取数据
    function getServerPaging(node, url, queryParams) {
        initTable(node, url, [10, 20, 30, 40, 50, 60, "All"], queryParams, [{
                checkbox: true
            }, {
                field: 'orderNumber',
                title: '订单号',
                width: '120px',
                formatter: stringFormatter
            }, {
                field: 'code',
                title: '客户代码',
                width: '90px',
                formatter: stringFormatter
            }, {
                field: 'productNumber',
                title: '客户料号',
                width: '170px',
                formatter: stringFormatter
            }, {
                field: 'itemName',
                title: '品名',
                width: '90px',
                formatter: stringFormatter
            }, {
                field: 'spec',
                title: '规格',
                width: '170px',
                formatter: stringFormatter
            }, {
                field: 'exportAmount',
                title: '出库数量',
                width: '150px',
                formatter: stringFormatter
            }, {
                field: 'unitPrice',
                title: '单价',
                width: '90px',
                formatter: stringFormatter
            }, {
                field: 'unit',
                title: '单位',
                width: '90px',
                formatter: stringFormatter
            }, {
                field: 'money',
                title: '金额',
                width: '90px',
                formatter: stringFormatter
            }, {
                field: 'remark',
                title: '备注',
                width: '90px',
                formatter: stringFormatter
            }, {
                field: 'operate',
                title: '操作',
                width: '257px',
                formatter: operateFormatter // 自定义方法，添加操作按钮
            }]);
    }

    function operateFormatter(value, row, index) {  // 赋予的参数
        return [  '<button class="btn btn-success view" data-toggle="modal" data-target="#viewModal" onclick="view('+ index +');">查看</button>&nbsp;&nbsp;' +
        '<button class="btn btn-warning view" data-toggle="modal" data-target="#auditModal" onclick="initAudit('+ index +');">备注</button>' ].join('');
    }

    changeToolTip();

    dragTheModalDialog();

    // 初始化新增下拉框（发票抬头）
    initSelect($titleNameSelect, "请输入发票抬头信息", titleNameFormatter, "/the-invoice-looked-up/getInvoiceTitle", 1000, params => {
        return {name: params.term, offset: params.page ? 10 * (params.page - 1) : 0, limit: 10};
    },result =>result.module.rows.map(item => {
        return {id: item.id, text: item.name};
    }), 10);
    function titleNameFormatter(result) {
        return  '<span title="'+'">' + result.text +'</span>';
    }

    // 初始化表格数据
    function init() {
        getServerPaging($table, "/delivery-order/getBillOfSale", params => {
            return { limit: params.limit, offset: params.offset, sort: "create_time", order: "DESC", exportStatus:"未出库" };
        });
    }

    // excel上传
    $("#upload").fileinput({
        language: 'zh',     // 设置语言
        dropZoneTitle: '可以将excel拖放到这里...',
        uploadUrl: '/file/upload',
        allowedFileExtensions : ['xlsx'],
        overwriteInitial: false,
        maxFileSize: 1024,      // 单位为kb，如果为0表示不限制文件大小
        minFileCount: 1,        // 每次上传允许的最少文件数。如果设置为0，则表示文件数是可选的。默认为0
        maxFileCount: 1,        // 每次上传允许的最大文件数。如果设置为0，则表示允许的文件数是无限制的。默认为0
        maxFilesNum: 1,
        uploadExtraData: function() {
            return { fileType: "excel", fileName: "temp.xlsx" };
        }
    }).on("fileuploaded", function(e, data) { // 文件上传成功的回调函数
        if (data.response === null) {
            swal("错误", "不支持该文件类型", "success");
            return;
        }

        if (data.response.success === false) {
            switch (data.response.code) {
                case 9002: swal("错误", "参数错误", "error");     break;
                case 9006: swal("错误", "文件创建错误", "error"); break;
            }
        } else {
            noParameterPostRequest("/delivery-order/importExcel", () => {
                $('#excelModal').modal('hide');
                swal("成功", "导入成功", "success");
                init();
            });
        }
    });

</script>
<script>
    /** 页面逻辑*/
    // add 出货单号码
    function addBillOfSaleNumInputChange() {
        if (null === $("#input_bill_of_sale_number").val()) {
            swal("操作提示", "请先输入生产数量", "info");
            $billOfSaleNumber.val("");
            return;
        }

        setInputSuccess($billOfSaleNumber);
    }
</script>
<script>
    /** 功能 */
    // 过滤
    function filter() {
        let data = { orderNumber: $("#txt_search_order_number").val(), code: $("#txt_search_code").val(), productNumber: $("#txt_search_product_number").val(),
            itemName: $("#txt_search_item_name").val(), spec: $("#txt_search_spec").val() };

        if ("" === data["orderNumber"] && "" === data["code"] && "" === data["productNumber"] && "" === data["itemName"] && "" === data["spec"]) {
            swal("操作提示", "请填写过滤参数", "info");
            return;
        }
        getServerPaging($table, "/delivery-order/getBillOfSaleByConditions", params => {
            let result = { limit: params.limit, offset: params.offset, sort: "create_time", order: "DESC", orderNumber: data["orderNumber"], code: data["code"],
                productNumber: data["productNumber"], itemName: data["itemName"], spec: data["spec"]};
            removeEmptyField(result);
            return result;
        });
    }

    // 导出excel
    function exportExcel() {
        let selections = $table.bootstrapTable('getSelections');
        if (selections.length === 0) {
            swal("操作提示", "请选择记录", "info");
        } else {
            parameterPostRequest("/delivery-order/exportExcel", selections, () => loadFile("出货单信息.xlsx"));
        }
    }

    // 查看
    function view(index) {
        let rows = $("#table").bootstrapTable('getData');
        $("#view_order_number").text(rows[index].orderNumber);
        $("#view_code").text(rows[index].code);
        $("#view_item_name").text(rows[index].itemName);
        $("#view_spec").text(rows[index].spec);
        $("#view_product_number").text(rows[index].productNumber);
        $("#view_export_amount").text(rows[index].exportAmount);
        $("#view_remark").text(rows[index].remark);
    }

    // 生成出库单
    function add() {
        let selections = $table.bootstrapTable('getSelections');
        if (selections.length === 0 ) {
            swal("操作提示", "请选择记录", "info");
        } else if (selections.length > 1) {
            swal("操作提示", "只能选择一条记录", "info");
        } else {
            let data = {
                billOfSaleId: selections[0].id,
                invoiceTitleId: $titleNameSelect.select2('data')[0].id,
                number: $("#input_bill_of_sale_number").val(),
                date: $("#input_bill_of_sale_date").val()
            };

            if ("" === data.invoiceTitleId || "" === data.number ||  "" === data.date || "" === data.billOfSaleId) {
                swal("操作提示", "请输入必输入项", "info");
            } else {
                parameterPostRequest("/delivery-order/insert", data,() => {
                    $('#addModal').modal('hide');
                    swal("正确", "出库成功", "success");
                    init();
                });
            }
        }
    }

    // 备注
    function initAudit(index) {
        let rows = $("#table").bootstrapTable('getData');
        $("#audit_remark").val(rows[index].remark);
        auditId = rows[index].id;
    }
    function audit() {
        let data = {
            id: auditId,
            remark: $("#audit_remark").val()
        };

        parameterPostRequest("/delivery-order/updateRemarkById", data, () => {
            $('#auditModal').modal('hide');
            swal("正确", "备注成功", "success");
            init();
        });
    }
</script>

</body>

</html>